<template>
    <V3Echarts :height="props.height" :width="props.width" :options="option" :top="10" container="container3" />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Object,
        default: () => {
            return {
                unit: '家',
                yAxis: ['大米', '花生', '草莓', '玉米', '杭白'],
                data: [500, 400, 300, 200, 100]
            }
        }
    },
    height: {
        type: Number,
        default: 380
    },
    width: {
        type: Number,
        default: null
    },
    color: {
        type: String,
        default: '#5cc7f3'
    }
})

let option = ref({})

const initChart = () => {
    const copyData = JSON.parse(JSON.stringify(props.chartData.data))
    copyData.sort((a: number, b: number) => {
        return b - a
    })

    option.value = {
        grid: {
            left: '3%',
            right: '17%',
            bottom: '0%',
            top: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            nameTextStyle: {
                align: 'center'
            },
            //坐标轴数据
            axisLabel: { show: false },
            //格网线
            splitLine: { show: false },
            // 刻度线
            axisTick: { show: false },
            //格网区域
            splitArea: { show: false }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                color: 'rgba(255, 255, 255, 0.8)',
                fontSize: 24,
                fontFamily: 'OPPOSans'
            },
            data: props.chartData.yAxis
        },
        series: [
            {
                type: 'bar',
                barWidth: 12,
                zlevel: 2,
                barGap: '-100%',
                itemStyle: {
                    normal: {
                        borderRadius: [6, 6, 6, 6],
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: props.color + '11'
                                },
                                {
                                    offset: 1,
                                    color: props.color
                                }
                            ]
                        },
                        label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: {
                                //数值样式
                                color: '#fff',
                                fontSize: 24,
                                fontFamily: 'Tencent, serif'
                            },
                            formatter: (formatter: any) => {
                                const c = formatter.value
                                return `${c}${props.chartData.unit}`
                            }
                        }
                    }
                },
                data: props.chartData.data
            },
            {
                type: 'bar',
                barWidth: 12,
                itemStyle: {
                    normal: {
                        color: '#88888855'
                    }
                },
                data: Array(copyData.length).fill(copyData[0])
            }
        ],
        dataZoom:
            props.chartData.data.length >= 10
                ? [
                      {
                          top: 10, //下滑块距离x轴底部的距离
                          right: -15,
                          type: 'slider', //类型,滑动块插件
                          show: true, //是否显示下滑块
                          yAxisIndex: [0], //选择的x轴
                          start: 0, //初始数据显示多少
                          end: 50 //初始数据最多显示多少
                      }
                  ]
                : []
    }
}

watch(
    () => props.chartData,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped></style>
